<!-- 学者详情页 -->
<template>
    <div class="box" v-loading="loading">
        <div class="info">
            <div class="photo">
                <img :src="nobelPrizeWinner.photoLocalLink" alt="">
            </div>
            <div class="userinfo" id="searchBox" v-loading="infoLoading" element-loading-background="rgba(233, 238, 243, 1)"
                v-if="nobelPrizeWinner.nobelPrize.length != 0">
                <h3>{{ nobelPrizeWinner.nameEn }}<span v-if="nobelPrizeWinner.nameCn != ''">({{ nobelPrizeWinner.nameCn
                }})</span> </h3>
                <div class="userinfo1">
                    <el-row>
                        <el-col :span="12">
                            <p>出生日期 : {{ nobelPrizeWinner.birthDate }}</p>
                        </el-col>
                        <el-col :span="12">
                            <p>出生国家 : {{ nobelPrizeWinner.birthCountryNow }}</p>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <p>出生地 : {{ nobelPrizeWinner.birthLocation }}</p>
                        </el-col>
                        <el-col :span="12">
                            <p>性别 : {{ nobelPrizeWinner.gender }}</p>
                        </el-col>
                    </el-row>
                </div>

                <div style="position: relative;font-size: 16px;">
                    <div style="margin: 20px 0;line-height: 24px;" v-for="ele in nobelPrizeWinner.nobelPrize"
                        :key="ele.motivation">
                        <p>{{ ele.awardedYear }}年{{ ele.categoryFullname }}</p>
                        <p v-if="ele.awardedAffiliation != 0">所属机构：{{ ele.awardedAffiliation }}</p>
                        <p>所属国家 : {{ ele.awardedCountry }}</p>
                        <div class="description">
                            <a href="#" class="content-detail" style="width:95%;font-size: 16px;">获奖原因:{{ ele.motivation
                            }}</a>
                            <span class="more-txt" @click="more">展开</span>
                            <span class="close-more" @click="close">收起</span>
                        </div>
                        <!-- <p style="margin: 0 50px"> ... ...</p> -->
                    </div>


                    <el-button v-if="nobelPrizeWinner.nobelPrize.length > 1" type="text"
                        style="margin-left:10px;position: absolute;right: 10px;bottom: 100px;" id="closeSearchBtn"
                        @click="closeSearch">
                        {{ word }}
                        <i :class="showAll ? 'el-icon-arrow-up ' : 'el-icon-arrow-down'"></i>
                    </el-button>
                </div>
            </div>
        </div>
        <div class="infochart">
            <div class="nav">
                <div>
                    <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
                        <el-radio-button label="生平">生平</el-radio-button>
                        <el-radio-button label="学术成果">学术成果</el-radio-button>
                        <el-radio-button label="学术合作">学术合作</el-radio-button>
                    </el-radio-group>
                </div>
            </div>

            <div class="lifetime" v-show="tabPosition == '生平'">
                <div>
                <!-- <section class="section intro">
                        <div class="container">
                            <h1>Svante Pääbo</h1>
                        </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                </section> -->

                    <section class="timeline">
                        <ol>

                            <li v-for="(item, index) in lifeList" :key="index">
                            <!-- <div>
                                    <time>{{ item.date }}</time>
                                    <p style="font-size: 16px;font-weight: 400;color: #333333;">荣誉:</p>
                                    <p style="font-size: 14px;color: #999999;margin-top: 20px;">
                                        获得[{{ item.category }}]荣誉
                                    </p>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        </div> -->
                                <div v-if="item.type == 1">
                                    <time>出生</time>
                                    <p style="font-size: 14px;color: #999999;margin-top: 20px;">日期:{{
                                        item.date }}</p>
                                    <p style="font-size: 14px;color: #999999;margin-top: 20px;">
                                        国家:{{ item.country }}
                                    </p>
                                    <p style="font-size: 14px;color: #999999;margin-top: 20px;">
                                        城市:{{ item.city }}
                                    </p>
                                </div>

                                <div v-if="item.type == 2">
                                    <time>教育</time>
                                    <!-- <p style="font-size: 16px;font-weight: 400;color: #333333;">出生:</p> -->
                                    <p style="font-size: 14px;color: #999999;margin-top: 20px;">日期:{{
                                        item.date }}</p>
                                    <p style="font-size: 14px;color: #999999;margin-top: 20px;">
                                        机构:{{ item.institution }}
                                    </p>
                                    <p style="font-size: 14px;color: #999999;margin-top: 20px;">
                                        国家:{{ item.country }}
                                    </p>
                                    <p v-if="item.degree != ''" style="font-size: 14px;color: #999999;margin-top: 20px;">
                                        学位:{{ item.degree }}
                                    </p>
                                </div>

                                <div v-if="item.type == 3">
                                    <time>结婚</time>
                                    <p style="font-size: 14px;color: #999999;margin-top: 20px;">日期:{{
                                        item.date }}</p>
                                    <p style="font-size: 14px;color: #999999;margin-top: 20px;">
                                        配偶:{{ item.spouse }}
                                    </p>
                                </div>

                                <div v-if="item.type == 4">
                                    <time>工作</time>
                                    <p style="font-size: 14px;color: #999999;margin-top: 20px;">开始日期:{{
                                        item.date }}</p>
                                    <p style="font-size: 14px;color: #999999;margin-top: 20px;">
                                        国家:{{ item.country }}
                                    </p>
                                    <p style="font-size: 14px;color: #999999;margin-top: 20px;">
                                        机构:{{ item.institution }}
                                    </p>
                                    <p style="font-size: 14px;color: #999999;margin-top: 20px;">
                                        任职:{{ item.proTitle }}
                                    </p>
                                </div>

                                <div v-if="item.type == 5">
                                    <time>诺贝尔奖</time>
                                    <p style="font-size: 14px;color: #999999;margin-top: 20px;">日期:{{
                                        item.date }}</p>
                                    <p style="font-size: 14px;color: #999999;margin-top: 20px;">
                                        奖项:{{ item.category }}
                                    </p>
                                </div>

                                <div v-if="item.type == 6">
                                    <time>其他奖项</time>
                                    <p style="font-size: 14px;color: #999999;margin-top: 20px;">日期:{{
                                        item.date }}</p>
                                    <p style="font-size: 14px;color: #999999;margin-top: 20px;">
                                        奖项:{{ item.category }}
                                    </p>
                                    <p v-if="item.institution != ''"
                                        style="font-size: 14px;color: #999999;margin-top: 20px;">
                                        机构:{{ item.institution }}
                                    </p>
                                </div>
                            </li>
                            <li></li>
                            <li></li>
                        </ol>
                    <!-- <div class="arrows">
                            <button class="arrow arrow__prev disabled" disabled>
                                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/arrow_prev.svg"
                                    alt="prev timeline arrow">
                            </button>
                            <button class="arrow arrow__next">
                                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/arrow_next.svg"
                                    alt="next timeline arrow">
                            </button>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                            </div> -->
                    </section>
                </div>

            </div>

            <div class="achievement" v-show="tabPosition == '学术成果'">
                <div class="charts">
                    <div class="">

                    </div>
                    <div>

                    </div>
                </div>

                <div class="paper">
                    <div class="left">
                        <h3>共有11110篇论文</h3>

                    </div>
                    <div class="right">
                        <h3>共有10篇论文</h3>
                        <div class="paperlist">
                            <h3>Numerical analysis of the Hirota equation: Modulational instabi</h3>
                            <p>Wang Li</p>
                            <p>In this paper we focus on the inthegarable hirota In this paper</p>
                            <p>《CHAOS》 <span>2022</span></p>
                        </div>

                        <div class="paperlist">
                            <h3>Numerical analysis of the Hirota equation: Modulational instabi</h3>
                            <p>Wang Li</p>
                            <p>In this paper we focus on the inthegarable hirota In this paper</p>
                            <p>《CHAOS》 <span>2022</span></p>
                        </div>

                        <div class="paperlist">
                            <h3>Numerical analysis of the Hirota equation: Modulational instabi</h3>
                            <p>Wang Li</p>
                            <p>In this paper we focus on the inthegarable hirota In this paper</p>
                            <p>《CHAOS》 <span>2022</span></p>
                        </div>
                    </div>
                </div>
            </div>



            <div class="cooperation" v-show="tabPosition == '学术合作'">
                <div>

                </div>
                <div>

                </div>
            </div>


        </div>
    </div>
</template>
<script>


import "@zkwq/business/dist/css/AggsItemH.min.css";
import { details } from "@/api/scholarDetail";
import { Loading } from "element-ui";
export default {
    data () {
        return {
            //加载
            infoLoading: true,
            loading: true,
            // 总条数
            total: 10,
            //查询参数
            queryParams: {
                current: 1,
                size: 10,
                uuid: this.$route.query.uuId
            },

            tabPosition: '生平',
            nobelPrizeWinner: {},

            //数据列表
            lifeList: [],
            //年龄列表
            ageList: [],
            // 奖项
            categoryList: [],
            // 国家
            countryList: [],
            // 机构
            institutionList: [],
            // 性别
            genderList: [],

            ifMore: [false],
            showAll: true,//是否展开全部
        }
    },
    computed: {
        word: function () {
            if (this.showAll == false) {
                //对文字进行处理
                return "展开全部";
            } else {
                return "收起全部";
            }
        }
    },
    mounted () {
        setTimeout(() => {
            this.infoLoading = true
            this.$nextTick(function () {
                this.closeSearch();
                this.infoLoading = false
            });
        }, 1300);
    },

    created () {
        this.getList()
    },
    methods: {
        getList () {
            this.loading = true
            details(this.queryParams).then((res) => {
                this.lifeList = res.body.lifeList
                this.nobelPrizeWinner = res.body.nobelPrizeWinner
                this.nobelPrizeWinner.nobelPrize.forEach((element, index) => {
                    this.nobelPrizeWinner.nobelPrize[index].awardedCountry = element.awardedCountry.join()
                    this.nobelPrizeWinner.nobelPrize[index].awardedAffiliation = element.awardedAffiliation.join()
                });

                this.$nextTick(() => {
                    /* 获取文本所在的div */
                    let contentDom = document.querySelectorAll('.content-detail');
                    contentDom = [...contentDom];
                    // 遍历div,判断高度,是否添加‘展开’按钮
                    contentDom.forEach((item, index) => {
                        let height = item.offsetHeight;
                        if (height > 22) {
                            // 超过高度，给该文本的父元素添加class
                            this.addClass(item.parentNode, 'list-more');
                        }
                    });
                });
                this.loading = false
            })
        },
        moreFn (index) {
            this.$set(this.ifMore, index, !this.ifMore[index])
        },


        init () {
            this.setEqualHeights(elH);
            this.animateTl(xScrolling, arrows, timeline);
            this.setSwipeFn(timeline, arrowPrev, arrowNext);
            this.setKeyboardFn(arrowPrev, arrowNext);
        },
        setEqualHeights (el) {
            var counter = 0;
            for (var i = 0; i < el.length; i++) {
                var singleHeight = el[i].offsetHeight;

                if (counter < singleHeight) {
                    counter = singleHeight;
                }
            }

            for (var i = 0; i < el.length; i++) {
                el[i].style.height = counter + "px";
            }
        },
        isElementInViewport (el) {
            var rect = el.getBoundingClientRect();
            return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
        },
        setBtnState (el) {
            var flag = arguments.length <= 1 || arguments[1] === undefined ? true : arguments[1];

            if (flag) {
                el.classList.add(disabledClass);
            } else {
                if (el.classList.contains(disabledClass)) {
                    el.classList.remove(disabledClass);
                }
                el.disabled = false;
            }
        },
        animateTl (scrolling, el, tl) {
            var counter = 0;
            for (var i = 0; i < el.length; i++) {
                el[i].addEventListener("click", function () {
                    if (!arrowPrev.disabled) {
                        arrowPrev.disabled = true;
                    }
                    if (!arrowNext.disabled) {
                        arrowNext.disabled = true;
                    }
                    var sign = this.classList.contains("arrow__prev") ? "" : "-";
                    if (counter === 0) {
                        tl.style.transform = "translateX(-" + scrolling + "px)";
                    } else {
                        var tlStyle = getComputedStyle(tl);
                        // add more browser prefixes if needed here
                        var tlTransform = tlStyle.getPropertyValue("-webkit-transform") || tlStyle.getPropertyValue("transform");
                        var values = parseInt(tlTransform.split(",")[4]) + parseInt("" + sign + scrolling);
                        tl.style.transform = "translateX(" + values + "px)";
                    }

                    setTimeout(function () {
                        isElementInViewport(firstItem) ? setBtnState(arrowPrev) : setBtnState(arrowPrev, false);
                        isElementInViewport(lastItem) ? setBtnState(arrowNext) : setBtnState(arrowNext, false);
                    }, 1100);

                    counter++;
                });
            }
        },
        setSwipeFn (tl, prev, next) {
            var hammer = new Hammer(tl);
            hammer.on("swipeleft", function () {
                return next.click();
            });
            hammer.on("swiperight", function () {
                return prev.click();
            });
        },

        // ADD BASIC KEYBOARD FUNCTIONALITY
        setKeyboardFn (prev, next) {
            document.addEventListener("keydown", function (e) {
                if (e.which === 37 || e.which === 39) {
                    var timelineOfTop = timeline.offsetTop;
                    var y = window.pageYOffset;
                    if (timelineOfTop !== y) {
                        window.scrollTo(0, timelineOfTop);
                    }
                    if (e.which === 37) {
                        prev.click();
                    } else if (e.which === 39) {
                        next.click();
                    }
                }
            });
        },
        // 查看更多
        more (event) {
            this.addClass(event.target.parentNode, 'list-close');
        },
        // 收起文本
        close (event) {
            this.removeClass(event.target.parentNode, 'list-close');
        },
        hasClass (obj, cls) {
            return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
        },
        addClass (obj, cls) {
            if (!this.hasClass(obj, cls)) obj.className += ' ' + cls;
        },
        removeClass (obj, cls) {
            if (this.hasClass(obj, cls)) {
                var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
                obj.className = obj.className.replace(reg, ' ');
            }
        },
        closeSearch () {
            this.showAll = !this.showAll;
            var searchBoxHeght = document.getElementById("searchBox");
            if (this.showAll == false) {
                searchBoxHeght.style.height = 210 + "px";
                searchBoxHeght.style.overflow = 'hidden';
            } else {
                searchBoxHeght.style.height = "auto";
            }
        }
    },
}
</script>
<style scoped> @import './timeline/index.css';
</style>

<style scoped lang='less'>
/deep/ .el-main[data-v-a83bd3b0] {
    background: red;
}

#searchBox {
    // overflow: hidden;
}

.box {
    // background: red;
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.info {
    padding: 35px;
    min-height: 210px;
}

.photo {
    width: 210px;
    height: 210px;
    border-radius: 8px;
    float: left;
    margin-right: 35px;
}

.photo img {
    width: 100%;
    height: 100%;
}

.userinfo {
    float: left;
    min-width: 800px;
    max-width: 75%;
    height: 100%;
    // overflow: hidden;
}

.userinfo h3 {
    width: 100%;
    height: 21px;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #3E5215;
    margin-top: 5px;
}

.userinfo1 {
    width: 1200px;
    display: flex;
    flex-direction: column
}

.userinfo1 p {
    width: 70%;
    height: 16px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    margin-top: 8px;
}

/deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    width: 117px;
    height: 36px;
    background: linear-gradient(0deg, #47630C, #78A816, #D8D8D8);
    border-radius: 4px;
    border: 0;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FFFFFF;
}

/deep/ .el-radio-button__inner {
    width: 117px;
    height: 36px;
    background: #FFFFFF;
    border: 2px solid #E7E7E7;
    border: 0;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
}

.lifetime {
    height: 100%;
    width: 100%;
    border-radius: 30px;
    background-color: rgb(238, 239, 244);
    margin-bottom: 20px;
}


.achievement {
    // display: flex;
    // justify-content: space-between;
}

.achievement div {
    // width: 49%;
    // height: 320px;
    // background: #FFFFFF;
    // box-shadow: -5px 0px 20px 4px rgba(31, 46, 1, 0.07);
    // border-radius: 8px;
}

.charts {
    display: flex;
    justify-content: space-between
}

.charts div {
    width: 49%;
    height: 320px;
    background: #FFFFFF;
    box-shadow: -5px 0px 20px 4px rgba(31, 46, 1, 0.07);
    border-radius: 8px;
    margin: 20px 0;
}

.paper {
    display: flex;
    box-shadow: -5px 0px 20px 4px rgba(31, 46, 1, 0.07);
    border-radius: 8px;
    margin-top: 20px;
    margin-bottom: 40px;
}

.paper .left {
    width: 250px;
    // height: 50px;
    background: #D5E9A0;
    border-radius: 8px;
}

.paper .right {
    width: calc(100%-250px);
    height: 620px;
    // background: #D5E9A0;
    border-radius: 8px;
}

.cooperation {
    display: flex;
    flex-wrap: wrap
}

.cooperation div {
    margin: 30px 0;
    width: 100%;
    height: 445px;
    background: #FFFFFF;
    box-shadow: -5px 0px 20px 4px rgba(31, 46, 1, 0.07);
    border-radius: 8px;
}

.paperlist {
    // height: 200px;
    margin: 20px 0;
}


//点击展开收起
.description {
    font-size: 14px;
    text-align: justify;
    line-height: 20px;
    position: relative;

    &.list-more {
        .content-detail {
            display: inline-block;
            color: #333333;
            height: 18px;
            overflow: hidden;
        }

        .more-txt {
            display: block;
        }

        .close-more {
            display: none;
        }
    }

    &.list-close {
        .content-detail {
            display: inline-block;
            color: #333333;
            height: auto;
        }

        .more-txt {
            display: none;
        }

        .close-more {
            display: block;
        }
    }

    .more-txt {
        display: none;
        width: 50px;
        text-align: right;
        background-color: #fff;
        color: #5188A6;
        float: right;
        position: absolute;
        right: 0;
        margin-top: -22px;
        background: url('') no-repeat;
        background-size: 100% 100%;
    }

    .close-more {
        display: none;
        width: 40px;
        text-align: center;
        background-color: #fff;
        color: #5188A6;
        float: right;
        position: absolute;
        right: 0;
        margin-top: -44px;
        background-image: url('')
    }
}
</style>





